<template>
  <div class="h-full bg-white w-full">
    <Card class="!h-full" :body-style="{ height: '100%' }" :title="cardTitle" :bordered="false">
      <div ref="chartRef" id="chartRef" class="w-full h-full"></div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, Ref, watch, onBeforeUnmount, nextTick } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { Card } from 'ant-design-vue';
  import china from './china.json';
  const props = defineProps({
    widgetData: {
      type: Object,
    },
    isResize: {
      type: Boolean,
    },
    dashboard: {
      type: Boolean,
    },
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const cardTitle = ref<string>('');
  const myEchart = ref<any>(null);
  const interval = ref<any>(null);
  const { setOptions, echarts, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);

  //data假数据
  const randomData = (now, value) => {
    value = Math.random() * 100;
    var valueName =
      now.getFullYear() +
      '/' +
      (now.getMonth() + 1) +
      '/' +
      now.getDate() +
      ' ' +
      (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) +
      ':' +
      (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) +
      ':' +
      (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds());

    return {
      name: now.toString(),

      value: [valueName, Math.round(value)],
    };
  };
  //渲染(用于折线图递进  暂时)
  const render = (obj) => {
    let options = JSON.parse(JSON.stringify(obj));
    const dom: any = document.getElementById('chartRef');
    myEchart.value = echarts.init(dom);
    let now: any = +new Date();
    let data: any = [];
    let value: any = Math.random() * 1000;
    for (let i = 0; i < 60; i++) {
      now = new Date(+now + 1000);
      data.push(randomData(now, value));
    }
    options.series[0].data = data;
    myEchart.value.setOption(options);
    interval.value = setInterval(() => {
      data.shift();
      now = new Date(+now + 1000);
      data.push(randomData(now, value));
      options.series[0].data = data;
      myEchart.value.setOption(options);
    }, 1000);
  };
  watch(
    () => props.widgetData,
    (nVal: Recordable) => {
      if (!nVal) return;
      if (myEchart.value) {
        myEchart.value.dispose();
      }
      console.log(nVal, 'nVal//?????');
      if (Object.keys(nVal).length === 0) return;
      const { options, title, chartType } = nVal;
      console.log(nVal, 'nVal');
      cardTitle.value = title;
      if (options.series[0]?.type == 'map') {
        echarts.registerMap('china', china as any);
      }
      if (chartType == 'line') {
        nextTick(() => {
          render(options);
        });
      } else {
        setOptions(options);
      }
    },
    {
      immediate: true,
      deep: true,
    },
  );
  watch(
    () => props.isResize,
    () => {
      getInstance()?.resize({ animation: { duration: 0 } });
    },
    {
      immediate: true,
    },
  );
  onBeforeUnmount(() => {
    clearInterval(interval.value);
  });
</script>

<style lang="less" scoped>
  :deep(.ant-card-head) {
    min-height: 0;
  }
</style>
